<template>
  <div>
    <div ref="myMap" style="height: 300px"></div>
  </div>
</template>
<script lang="ts" setup>
import type { EChartsType } from "echarts";
import type { PropType } from "vue";

const { $eChart } = useNuxtApp();
const myMap = ref<HTMLElement>();
const props = defineProps({
  data: {
    type: Array as PropType<{ id: number; name: string; value: number }[]>,
    default: () => [],
  },
});
// 指定图表的配置项和数据
let myChart: EChartsType | null = null;
const option = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "5%",
    left: "left",
    orient: 'vertical',
  },
  series: [
    {
      name: "饼图",
      type: "pie",
      radius: "50%",
      data: props.data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};
watch(
  () => props.data,
  (newdata) => {
    if (myChart)
      myChart.setOption({
        series: [
          {
            data: newdata,
          },
        ],
      });
  }
);
onMounted(() => {
  myChart = $eChart.init(myMap.value!);
   
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
});
</script>
